<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-product-new">
      <!--tab-->
      <div class="weui-tab ga-tab">
        <div class="weui-navbar">
          <block v-for="(item,index) in tabs" :key="index">
            <div :class="{'weui-bar__item_on':activeIndex == index}" class="weui-navbar__item" @click="activeIndex = index">
              <div class="weui-navbar__title">{{item}}</div>
            </div>
          </block>
        </div>
        <div class="weui-tab__panel">
          <!--0-->
          <div class="weui-tab__content" :hidden="activeIndex != 0">

            <ul class="ga-group-list ga-media-list">
              <li v-for="(item,index) in newlist" :key="index">
                <a class="item" :href="'/pages/shopDetail/main?id='+item.id">
                  <div class="item-media">
                    <image class="img-box" mode="aspectFill" :src="item.icon"></image>
                  </div>
                  <div class="item-inner">
                    <p class="title">{{item.goods_name}}</p>
                    <p class="p1"></p>
                    <div style="position: relative;">
                      <p class="p3">
                        <span>¥ {{item.market_price}}</span>
                        ¥ {{item.shop_price}}
                      </p>
                      <div class="cart"></div>
                    </div>
                  </div>
                </a>
              </li>
            </ul>

          </div>
          <!--1-->
          <div class="weui-tab__content" :hidden="activeIndex != 1">

            <ul class="ga-group-list ga-media-list">
              <li v-for="(item,index) in hotlist" :key="index">
                <a class="item" :href="'/pages/shopDetail/main?id='+item.id">
                  <div class="item-media">
                    <image class="img-box" mode="aspectFill" :src="item.icon"></image>
                  </div>
                  <div class="item-inner">
                    <p class="title">{{item.goods_name}}</p>
                    <p class="p1"></p>
                    <p class="p2">
                      已售<span class="gOrange">{{item.sale_num}}</span><span class="mr10">件</span>
                      好评率<span class="gOrange">99%</span>
                    </p>
                    <p class="p3">
                      <span>¥ {{item.market_price}}</span>
                      ¥ {{item.shop_price}}
                    </p>
                    <div class="cart"></div>
                  </div>
                </a>
              </li>
            </ul>

          </div>
        </div>
      </div>
      <!--tab-->
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tabs: ["24小时最新热卖", "最受好评新品"],
        activeIndex: 0,
        newlist: [],
        hotlist: [],
      }
    },
    methods: {
      async load(){
         let res = await this.$_util.ajax.get('https://guo-a.com/mapi/product/productlist?sort=newest&sorttype=desc');
         if (res.code === 200) {
            this.newlist = res.data
         }
         let hot = await this.$_util.ajax.get('https://guo-a.com/mapi/product/productlist?sort=popular&sorttype=desc');
         if (hot.code === 200) {
          console.log(hot)
            this.hotlist = hot.data
         }
      }
    },

    created () {

    },
    mounted () {

      // this.activeIndex = 0;
      // this.newlist=[]
      // this.hotlist=[]
      this.load()
    }
  }
</script>
